﻿@model CustomerSearchModel

@using System.Globalization;
@using Nop.Core.Domain.Media

@inject MediaSettings _mediaSettings

@{
    //page title
    ViewBag.Title = T("Admin.Customers.Customers").Text;
    //active menu item (system name)
    Html.SetActiveMenuItemSystemName("Customers list");
}

<form asp-controller="Customer" asp-action="List" method="post">
    <div class="content-header clearfix">
        <h1 class="pull-left">
            @T("Admin.Customers.Customers")
        </h1>
        <div class="pull-right">
            <a asp-action="Create" class="btn bg-blue">
                <i class="fa fa-plus-square"></i>
                @T("Admin.Common.AddNew")
            </a>
            <div class="btn-group">
                <button type="button" class="btn btn-success">
                    <i class="fa fa-download"></i>
                    @T("Admin.Common.Export")
                </button>
                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">&nbsp;</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <button type="submit" name="exportxml-all">
                            <i class="fa fa-file-code-o"></i>
                            @T("Admin.Common.ExportToXml.All")
                        </button>
                    </li>
                    <li>
                        <button type="button" id="exportxml-selected">
                            <i class="fa fa-file-code-o"></i>
                            @T("Admin.Common.ExportToXml.Selected")
                        </button>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <button type="submit" name="exportexcel-all">
                            <i class="fa fa-file-excel-o"></i>
                            @T("Admin.Common.ExportToExcel.All")
                        </button>
                    </li>
                    <li>
                        <button type="button" id="exportexcel-selected">
                            <i class="fa fa-file-excel-o"></i>
                            @T("Admin.Common.ExportToExcel.Selected")
                        </button>
                    </li>
                </ul>
                @await Component.InvokeAsync("AdminWidget", new { widgetZone = AdminWidgetZones.CustomerListButtons })
            </div>
        </div>
    </div>

    <div class="content">
        <div class="form-horizontal">
            <div class="panel-group">
                <div class="panel panel-default panel-search">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <div class="col-md-4">
                                        <nop-label asp-for="SearchEmail" />
                                    </div>
                                    <div class="col-md-8">
                                        <nop-editor asp-for="SearchEmail" />
                                    </div>
                                </div>
                                @if (Model.UsernamesEnabled)
                                {
                                    <div class="form-group">
                                        <div class="col-md-4">
                                            <nop-label asp-for="SearchUsername" />
                                        </div>
                                        <div class="col-md-8">
                                            <nop-editor asp-for="SearchUsername" />
                                        </div>
                                    </div>
                                }
                                <div class="form-group">
                                    <div class="col-md-4">
                                        <nop-label asp-for="SearchFirstName" />
                                    </div>
                                    <div class="col-md-8">
                                        <nop-editor asp-for="SearchFirstName" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-4">
                                        <nop-label asp-for="SearchLastName" />
                                    </div>
                                    <div class="col-md-8">
                                        <nop-editor asp-for="SearchLastName" />
                                    </div>
                                </div>
                                @if (Model.DateOfBirthEnabled)
                                {
                                    <div class="form-group">
                                        <div class="col-md-4">
                                            <nop-label asp-for="SearchDayOfBirth" />
                                        </div>
                                        <div class="col-md-8">
                                            @{
                                                var monthOfBirthValues = new List<SelectListItem>();
                                                monthOfBirthValues.Add(new SelectListItem { Text = T("Admin.Customers.Customers.List.SearchDateOfBirth.Month").Text, Value = "0" });
                                                for (var i = 1; i <= 12; i++)
                                                {
                                                    monthOfBirthValues.Add(new SelectListItem { Text = i.ToString(CultureInfo.InvariantCulture), Value = i.ToString(CultureInfo.InvariantCulture) });
                                                }
                                                var dayOfBirthValues = new List<SelectListItem>();
                                                dayOfBirthValues.Add(new SelectListItem { Text = T("Admin.Customers.Customers.List.SearchDateOfBirth.Day").Text, Value = "0" });
                                                for (var i = 1; i <= 31; i++)
                                                {
                                                    dayOfBirthValues.Add(new SelectListItem { Text = i.ToString(CultureInfo.InvariantCulture), Value = i.ToString(CultureInfo.InvariantCulture) });
                                                }
                                            }
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <nop-select asp-for="SearchMonthOfBirth" asp-items="@monthOfBirthValues" />
                                                </div>
                                                <div class="col-md-6">
                                                    <nop-select asp-for="SearchDayOfBirth" asp-items="@dayOfBirthValues" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                                }
                            </div>
                            <div class="col-md-7">
                                @if (Model.CompanyEnabled)
                                {
                                    <div class="form-group">
                                        <div class="col-md-4">
                                            <nop-label asp-for="SearchCompany" />
                                        </div>
                                        <div class="col-md-8">
                                            <nop-editor asp-for="SearchCompany" />
                                        </div>
                                    </div>
                                }
                                @if (Model.PhoneEnabled)
                                {
                                    <div class="form-group">
                                        <div class="col-md-4">
                                            <nop-label asp-for="SearchPhone" />
                                        </div>
                                        <div class="col-md-8">
                                            <nop-editor asp-for="SearchPhone" />
                                        </div>
                                    </div>
                                }
                                @if (Model.ZipPostalCodeEnabled)
                                {
                                    <div class="form-group">
                                        <div class="col-md-4">
                                            <nop-label asp-for="SearchZipPostalCode" />
                                        </div>
                                        <div class="col-md-8">
                                            <nop-editor asp-for="SearchZipPostalCode" />
                                        </div>
                                    </div>
                                }
                                <div class="form-group">
                                    <div class="col-md-4">
                                        <nop-label asp-for="SearchIpAddress" />
                                    </div>
                                    <div class="col-md-8">
                                        <nop-editor asp-for="SearchIpAddress" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-4">
                                        <nop-label asp-for="SelectedCustomerRoleIds" />
                                    </div>
                                    <div class="col-md-8">
                                        <nop-select asp-for="SelectedCustomerRoleIds" asp-items="Model.AvailableCustomerRoles" asp-multiple="true" />
                                        <script>
                                            $(document).ready(function() {
                                                var rolesIdsInput =
                                                    $('#@Html.IdFor(model => model.SelectedCustomerRoleIds)')
                                                        .data("kendoMultiSelect");
                                                rolesIdsInput.setOptions({
                                                    autoClose: false,
                                                    filter: "contains"
                                                });

                                                @if (Model.AvailableCustomerRoles.Count == 0)
                                                {
                                                    <text>
                                                        rolesIdsInput.setOptions({
                                                            enable: false,
                                                            placeholder:
                                                                '@T("Admin.Catalog.Products.CustomerRoles.NoCustomerRolesAvailable")'
                                                        });
                                                        rolesIdsInput._placeholder();
                                                        rolesIdsInput._enable();
                                                    </text>
                                                }
                                            });
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-7 col-md-offset-5">
                                <button type="button" id="search-customers" class="btn btn-primary btn-search">
                                    <i class="fa fa-search"></i>
                                    @T("Admin.Common.Search")
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">
                        <div id="customers-grid"></div>

                        <script>
    $(document).ready(function() {
        $("#customers-grid").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        url: "@Html.Raw(Url.Action("CustomerList", "Customer"))",
                        type: "POST",
                        dataType: "json",
                        data: function() {
                            var data = {
                                SelectedCustomerRoleIds: $('#@Html.IdFor(model => model.SelectedCustomerRoleIds)').val(),
                                SearchEmail: $('#@Html.IdFor(model => model.SearchEmail)').val(),
                                SearchUsername: $('#@Html.IdFor(model => model.SearchUsername)').val(),
                                SearchFirstName: $('#@Html.IdFor(model => model.SearchFirstName)').val(),
                                SearchLastName: $('#@Html.IdFor(model => model.SearchLastName)').val(),
                                SearchDayOfBirth: $('#@Html.IdFor(model => model.SearchDayOfBirth)').val(),
                                SearchMonthOfBirth: $('#@Html.IdFor(model => model.SearchMonthOfBirth)').val(),
                                SearchCompany: $('#@Html.IdFor(model => model.SearchCompany)').val(),
                                SearchPhone: $('#@Html.IdFor(model => model.SearchPhone)').val(),
                                SearchZipPostalCode: $('#@Html.IdFor(model => model.SearchZipPostalCode)').val(),
                                SearchIpAddress: $('#@Html.IdFor(model => model.SearchIpAddress)').val()
                            };
                            addAntiForgeryToken(data);
                            return data;
                        }
                    }
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors"
                },
                error: function(e) {
                    display_kendoui_grid_error(e);
                    // Cancel the changes
                    this.cancelChanges();
                },
                pageSize: @(Model.PageSize),
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            pageable: {
                refresh: true,
                pageSizes: [@(Model.AvailablePageSizes)],
                @await Html.PartialAsync("_GridPagerMessages")
            },
            scrollable: false,
            dataBound: onDataBound,
            columns: [
                {
                    field: "Id",
                    headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
                    headerAttributes: { style: "text-align:center" },
                    attributes: { style: "text-align:center" },
                    template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
                    width: 50
                }, {
                    field: "Email",
                    title: "@T("Admin.Customers.Customers.Fields.Email")",
                    width: 200
                },
                @if (Model.AvatarEnabled)
                {
                   <text>{
                    field: "AvatarUrl",
                    title: "@T("Admin.Customers.Customers.Fields.Avatar")",
                    width: @(_mediaSettings.AvatarPictureSize),
                    template: "# if(AvatarUrl) {# <img src='#=AvatarUrl#' class='avatar-img' alt='@T("Admin.Customers.Customers.Fields.Avatar")'/> #} #"
                },</text>
                }
                @if (Model.UsernamesEnabled)
                {
                    <text>{
                    field: "Username",
                    title: "@T("Admin.Customers.Customers.Fields.Username")",
                    width: 200
                },</text>
                }
                {
                    field: "FullName",
                    title: "@T("Admin.Customers.Customers.Fields.FullName")",
                    width: 200
                }, {
                    field: "CustomerRoleNames",
                    title: "@T("Admin.Customers.Customers.Fields.CustomerRoles")",
                    width: 200
                },

                @if (Model.CompanyEnabled)
                {
                    <text>{
                    field: "Company",
                    title: "@T("Admin.Customers.Customers.Fields.Company")",
                    width: 200
                },</text>
                }

                @if (Model.PhoneEnabled)
                {
                    <text>{
                    field: "Phone",
                    title: "@T("Admin.Customers.Customers.Fields.Phone")",
                    width: 200
                },</text>
                }

                @if (Model.ZipPostalCodeEnabled)
                {
                    <text>{
                    field: "ZipPostalCode",
                    title: "@T("Admin.Customers.Customers.Fields.ZipPostalCode")",
                    width: 200
                },</text>
                }
                {
                    field: "Active",
                    title: "@T("Admin.Customers.Customers.Fields.Active")",
                    width: 100,
                    headerAttributes: { style: "text-align:center" },
                    attributes: { style: "text-align:center" },
                    template: '# if(Active) {# <i class="fa fa-check true-icon"></i> #} else {# <i class="fa fa-close false-icon"></i> #} #'
                }, {
                    field: "CreatedOn",
                    title: "@T("Admin.Customers.Customers.Fields.CreatedOn")",
                    width: 200,
                    type: "date",
                    format: "{0:G}"
                }, {
                    field: "LastActivityDate",
                    title: "@T("Admin.Customers.Customers.Fields.LastActivityDate")",
                    width: 200,
                    type: "date",
                    format: "{0:G}"
                }, {
                    field: "Id",
                    title: "@T("Admin.Common.Edit")",
                    width: 50,
                    headerAttributes: { style: "text-align:center" },
                    attributes: { style: "text-align:center" },
                    template: '<a class="btn btn-default" href="Edit/#=Id#"><i class="fa fa-pencil"></i>@T("Admin.Common.Edit")</a>'
                }
            ]
        });
    });
                        </script>

                        <script>
    var selectedIds = [];

    $(document).ready(function() {
        //search button
        $('#search-customers').click(function() {
            var grid = $('#customers-grid').data('kendoGrid');
            grid.dataSource.page(1); //new search. Set page size to 1
            //grid.dataSource.read(); we already loaded the grid above using "page" function
            //clear selected checkboxes
            $('.checkboxGroups').attr('checked', false).change();
            selectedIds = [];
            return false;
        });

        $("".concat("#@Html.IdFor(model => model.SearchEmail),",
            "#@Html.IdFor(model => model.SearchUsername),",
            "#@Html.IdFor(model => model.SearchFirstName),",
            "#@Html.IdFor(model => model.SearchLastName),",
            "#@Html.IdFor(model => model.SearchCompany),",
            "#@Html.IdFor(model => model.SearchPhone),",
            "#@Html.IdFor(model => model.SearchZipPostalCode),",
            "#@Html.IdFor(model => model.SearchIpAddress)")).keydown(function(event) {
            if (event.keyCode === 13) {
                $("#search-customers").click();
                return false;
            }
        });

        $('#mastercheckbox').click(function() {
            $('.checkboxGroups').attr('checked', $(this).is(':checked')).change();
        });

        //wire up checkboxes.
        $('#customers-grid').on('change', 'input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]', function(e) {
            var $check = $(this);
            var checked = jQuery.inArray($check.val(), selectedIds);
            if ($check.is(":checked") == true) {
                if (checked == -1) {
                    //add id to selectedIds.
                    selectedIds.push($check.val());
                }
            } else if (checked > -1) {
                //remove id from selectedIds.
                selectedIds = $.grep(selectedIds, function (item, index) {
                    return item != $check.val();
                });
            }
            updateMasterCheckbox();
        });
    });

    function onDataBound(e) {
        $('#customers-grid input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]').each(function() {
            var currentId = $(this).val();
            var checked = jQuery.inArray(currentId, selectedIds);
            //set checked based on if current checkbox's value is in selectedIds.
            $(this).attr('checked', checked > -1);
        });

        updateMasterCheckbox();
    }

    function updateMasterCheckbox() {
        var numChkBoxes = $('#customers-grid input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]').length;
        var numChkBoxesChecked = $('#customers-grid input[type=checkbox][id!=mastercheckbox][class=checkboxGroups]:checked').length;
        $('#mastercheckbox').attr('checked', numChkBoxes == numChkBoxesChecked && numChkBoxes > 0);
    }
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@*export selected (XML). We don't use GET approach because it's limited to 2K-4K chars and won't work for large number of entities*@
<form asp-controller="Customer" asp-action="ExportXmlSelected" method="post" id="export-xml-selected-form">
    <input type="hidden" id="selectedIds" name="selectedIds" value="" />
</form>
<script>
    $(document).ready(function () {
        $('#exportxml-selected').click(function (e) {
            e.preventDefault();
            var ids = selectedIds.join(",");
            $('#export-xml-selected-form #selectedIds').val(ids);
            $('#export-xml-selected-form').submit();
            return false;
        });
    });
</script>

@*export selected (Excel). We don't use GET approach because it's limited to 2K-4K chars and won't work for large number of entities*@
<form asp-controller="Customer" asp-action="ExportExcelSelected" method="post" id="export-excel-selected-form">
    <input type="hidden" id="selectedIds" name="selectedIds" value="" />
</form>
<script>
    $(document).ready(function () {
        $('#exportexcel-selected').click(function (e) {
            e.preventDefault();
            var ids = selectedIds.join(",");
            $('#export-excel-selected-form #selectedIds').val(ids);
            $('#export-excel-selected-form').submit();
            return false;
        });
    });
</script>